<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Data-Table 表格</title>
    <link rel="stylesheet" href="/static/lib/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/style.css">
</head>

<body class="body">

    <!-- 工具集 -->
    <div class="my-btn-box">
        <span class="fl">
            <a class="layui-btn layui-btn-danger radius btn-delect" id="btn-delete-all">批量删除</a>
            <a class="layui-btn btn-add btn-default" id="btn-add">添加</a>
            <a class="layui-btn btn-add btn-default" id="btn-refresh">
                <i class="layui-icon">&#x1002;</i>
            </a>
        </span>
        <span class="fr">
            <span class="layui-form-label">搜索条件：</span>
            <div class="layui-input-inline">
                <input type="text" autocomplete="off" placeholder="请输入搜索条件" class="layui-input">
            </div>
            <button class="layui-btn mgl-20">查询</button>
        </span>
    </div>

    <!-- 表格 -->
    <div id="dateTable" lay-filter="table"></div>
    <script type="text/javascript" src="/static/lib/layui/layui.js"></script>
    <script type="text/javascript" src="/static/js/main.js"></script>
    <script type="text/javascript">

        // layui方法
        layui.use(['table', 'form', 'layer', 'vip_table'], function () {

            // 操作对象
            var form = layui.form
                , table = layui.table
                , layer = layui.layer
                , $ = layui.jquery;

            // 表格渲染
            table.render({
                elem: '#dateTable',                  //指定原始表格元素选择器（推荐id选择器）
                height: 'full-80', cellMinWidth: 80
                , cols: [[                  //标题栏
                    { checkbox: true, fixed: true }
                    , { field: 'id', title: 'ID', sort: true, width: 80 }
                    , { field: 'account', title: '用户名', width: 120 }
                    , { field: 'auth_group_name', title: '权限组', width: 120 }
                    , { field: 'last_login_time', title: '最后登录时间', width: 180 }
                    , { field: 'last_login_ip', title: '最后登录IP', width: 180 }
                    , { field: 'create_time', title: '创建时间', width: 180 }
                    , { field: 'status', title: '状态', width: 70 }
                    , { fixed: 'right', title: '操作', minWidth: 150, align: 'center', toolbar: '#barOption' } //这里的toolbar值是模板元素的选择器
                ]]
                , id: 'dataCheck'
                , url: './../json/data_table.json'
                , method: 'get'
                , page: true
                , limits: [30, 60, 90, 150, 300]
                , limit: 30 //默认采用30
                , loading: false
                , done: function (res, curr, count) {
                    //如果是异步请求数据方式，res即为你接口返回的信息。
                    //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                    console.log(res);

                    //得到当前页码
                    console.log(curr);

                    //得到数据总量
                    console.log(count);
                }
            });


            // 刷新
            $('#btn-refresh').on('click', function () {
                tableIns.reload();
            });


            //监听表格复选框选择
            table.on('checkbox(table)', function (obj) {
                console.log(obj)
            });
            //监听工具条
            table.on('tool(table)', function (obj) {
                var data = obj.data;
                if (obj.event === 'detail') {
                    layer.msg('ID：' + data.id + ' 的查看操作');
                } else if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        obj.del();
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {
                    layer.alert('编辑行：<br>' + JSON.stringify(data))
                }
            });

            var $ = layui.$, active = {
                getCheckData: function () { //获取选中数据
                    var checkStatus = table.checkStatus('idTest')
                        , data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                }
                , getCheckLength: function () { //获取选中数目
                    var checkStatus = table.checkStatus('idTest')
                        , data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                }
                , isAll: function () { //验证是否全选
                    var checkStatus = table.checkStatus('idTest');
                    layer.msg(checkStatus.isAll ? '全选' : '未全选')
                }
            };

            $('.demoTable .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });
    </script>
    <!-- 表格操作按钮集 -->
    <script type="text/html" id="barOption">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>
</body>

</html>